<template>
  <view
    class="home-goods-box"
    :style="{ backgroundColor: bgColor }"
    @click="goodsClick"
  >
    <!-- 竖排 -->
    <view
      class=""
      :class="type === 'col' ? 'home-goods-col-box' : 'home-goods-row-box'"
    >
      <!-- 图片 -->
      <view class="home-goods-image" :style="imageStyleComputed">
        <!-- <image :src="$img_path('/home/goods-col.png')" mode="aspectFill"></image> -->
        <lazy-image :src="goods.image" mode="aspectFill"></lazy-image>
        <!-- 提示 -->
        <!-- <view class="home-goods-tip-tag">
					<text>热销TOP1</text>
				</view> -->
      </view>
      <!-- 信息区域 -->
      <view class="info-box">
        <view class="info-title">
          <text>{{ goods.name }}</text>
        </view>
        <view class="info-sale">
          <text>销量：{{ goods.salenums }}</text>
        </view>
        <view class="info-tags" v-if="goods.tag_name">
          <view
            class="info-tag"
            v-for="(item, index) in goods.tag_name.split(',')"
            :class="{ 'info-tag-primary': index == 0 }"
            :key="index"
          >
            <text>{{ item }}</text>
          </view>
        </view>
        <view class="flex-1"> </view>
        <view class="info-price-box">
          <view class="info-price">
            <text class="info-price-pre">￥</text>
            <text>{{ goods.price }}</text>
            <!-- <text class="info-price-sufix">/台</text> -->
          </view>
          <view class="info-old-price">
            <text>￥{{ goods.market_price }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "home-goods-box",
  props: {
    type: {
      type: String,
      default: () => "col",
    },
    imageStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    bgColor: {
      type: String,
      default: () => "#FFFFFF",
    },
    goods: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    imageStyleComputed() {
      let styleStr = "";
      Object.keys(this.imageStyle).forEach((key) => {
        styleStr += `${key}: ${this.imageStyle[key]}; `;
      });
      return styleStr;
    },
  },
  mounted() {},
  data() {
    return {
      img_width: "",
    };
  },
  methods: {
    goodsClick() {
      console.log("点击商品", this.goods);
      uni.navigateTo({
        url: "/pagesService/serviceDetail/serviceDetail?id=" + this.goods.id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "home-goods-box.scss";
</style>